<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
     <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
    <Article-item
     v-for="obj in articleList"
      :key="obj.art_id"
      :artObj="obj"
      @click="artDetailFn(obj.art_id)"
      ></Article-item>
      </van-list>
      </van-pull-refresh>

  </div>
</template>

<script>
import ArticleItem from '@/components/articleItem.vue'
import { getArticleListAPI } from '@/api'
export default {
  props: {
    channelId: Number
  },
  components: {
    ArticleItem
  },
  data () {
    return {
      articleList: [],
      list: [],
      loading: false,
      finished: false,
      nextTime: new Date(), // 下一页文章数据(来自于上一次请求响应值里的pre_timetamp)
      refreshing: false
    }
  },
  methods: {

    async onLoad () {
      // 异步更新数据,获取文章列表
      if (this.articleList.length > 0) {
        // 上来你先走created请求, 把数据拿回来铺设页面, 等用户真的滚动到下面了, 再次执行load事件, 这个判断有数据了, 我在请求下一页
        this.getArticleListFn()
      }
    },
    // 获取文章列表
    async getArticleListFn () {
      const res = await getArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.nextTime
      })
      // if (res.data?.data?.results?.length === 0) {
      //   // 本次加载更多就无数据
      //   this.finished = true
      // }

      this.articleList = [...this.articleList, ...res.data.data.results]
      // 如果pre_timestamp本次为null, 没有下一页的数据
      if (res.data?.data?.pre_timestamp === null) {
        this.finished = true
        this.nextTime = null
      } else {
        this.nextTime = res.data.data.pre_timestamp
      }
      this.loading = false // 本次加载完毕(这样下次触底, 才能再出发load事件和onLoad方法)
      setTimeout(() => { // 完全为了看一眼顶部加载转圈效果
        this.refreshing = false // 本次刷新完毕
        this.refreshing = false
      }, 1000)
    },
    onRefresh () {
      this.articleList = []
      this.nextTime = new Date()
      this.getArticleListFn()
    },
    artDetailFn (artId) {
      this.$router.push({
        path: '/art_detail',
        query: {
          aid: artId
        }
      })
    }
  },
  created () {
    this.getArticleListFn()
  }

}
</script>

<style>

</style>
